<template>
  <div>
    <Test :loading="true"/>
    <!-- <title-bar :title="title" @goBack="goback"></title-bar> -->
    <div id="dynamic-component-demo" class="demo">
      <!-- <button
        v-for="tab in tabs"
        :key="tab"
        :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button> -->
<button @click="changeCom()">切换组件</button>
      <component
        :is="currentTab"
        class="tab"
        :data="propsData"
        :dataA="propsDataA"
        :dataB="propsDataB"
      >
        <span slot="first">插槽1</span>
        <span slot="second">插槽2</span>
       <template slot="third" slot-scope="row">{{ row.comAdata.name }}</template>   
        <span slot="default">默认插槽</span>  
    </component>
    </div>
  </div>
</template>
<script>
//import TitleBar from "@/components/TitleBar";
import comA from "./components/comA";
import comB from "./components/comB";
import Test from "./components/Test.vue";
export default {
  name: "",
  components: {
    //TitleBar,
    Test,
    comA,
    comB
  },
  data() {
    return {
      title: "动态组件",
      currentTab: "comA",
      tabs: ["comA", "comB"],
      propsData: "send data",
      propsDataA: "comA send data",
      propsDataB: "comB send data",
      apptotest:"传给test"
    };
  },
  created() {
    setTimeout(() => {
      this.showComponent = "comA";
     // this.changeCom();
    }, 1000);
  },
  computed: {
    currentTabComponent() {
      return this.currentTab;
    }
  },
  methods: {
    // 返回方法
    goback() {
      // this.$emit("GoBack");
    },
    changeCom(){
      if(this.currentTab=='comA'){
         this.currentTab='comB'
      }else{
        this.currentTab='comA'
      }
    }
  }
};
</script>
<style scoped>
.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}

.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.demo-tab {
  border: 1px solid #ccc;
  padding: 10px;
}
.tab {
  margin: 20px auto;
}
</style>
